@import "user";

.start_school_list {
	&>ul{
		&>li {
			&>a {
				text-align: center !important;
				line-height: 2rem !important;
				color: #333 !important;
				font-size: 1.2rem !important;
				font-family: $fontFamily !important;
				text-decoration: none !important;
			}
		}
	}
}

.start_school_stuff {
	float: right;
	display: inline-block;
	vertical-align: top;
	width: 79%;
	padding: 2rem 2rem;

	&>h5 {
		text-align: center;
		line-height: 3rem ;
		color: #999 ;
		font-size: 2rem ;
		font-family: $fontFamily ;
		font-weight: normal;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.start_list {
		margin-bottom: 0rem;
	}
}

.start_school_stuff_mobile {
	float: none !important;
	display: block;
	width: 100%;
	padding: 0rem 0rem !important;

	&>h5 {
		display: inline-block;
		width: auto;
		font-size: 1.6rem ;
		font-family: $fontFamily ;
		font-weight: normal;
		text-align: left !important;
		color: #333;
		margin-bottom: 0rem;
	}

	&>.start_school_select {
		display: inline-block;
		vertical-align: top;
		float: right;
		line-height: 3rem;
		margin-top: 1rem;

		&>select {
			height: 3rem;
			min-width: 8rem;
			font-size: 1rem ;
			font-family: $fontFamily ;
			font-weight: normal;
			border-radius: 5px;
			border: solid 1px #e1e1e1;
			padding: 0rem 1rem;

			&:focus {
				outline: none;
			}
		}
	}


}

@include min-screen(1000px){
	
	.start_school_list {
		display: inline-block;
		vertical-align: top;
		padding: 1rem 1rem 1rem 0rem;
		border-top:solid 1px #e1e1e1;
		border-right: solid 1px #e1e1e1;
		width: 20%;
		height: 72rem;

		&>ul{
			&>li {
				border: none !important;
				display: block;
				width: 100% !important;

				&>a {
					text-align: left !important;
					line-height: 2rem !important;
					color: #333 !important;
					font-size: 1.2rem !important;
					font-family: $fontFamily !important;
					text-decoration: none !important;
					border-radius: 6px !important;
					padding: 1.2rem 1rem;
					border: none;   
					border: solid 1px #e1e1e1;
				}

				&>ul.start_school_sublist {
					position: relative;
					top: 0rem;
					height: 0rem;
					overflow: hidden;
					list-style: none;
					padding-left: 1.5rem;
					transition: all 0.3s linear;
					-webkit-transition: all 0.3s linear;
					-ms-transition: all 0.3s linear;
					-moz-transition: all 0.3s linear;
					-o-transition: all 0.3s linear;

					&>li{
						margin: 0.5rem 0rem;
						text-align: left !important;
						line-height: 2rem !important;
						color: #333 !important;
						font-size: 1.2rem !important;
						font-family: $fontFamily !important;
						text-decoration: none !important;
						border-radius: 0.5rem !important;
						padding: 0.8rem 1rem;
						border: none;
						cursor: pointer;

						&:hover {
							background: #e1e1e1;
						}

						&.current {
							border: solid 1px #000;
							background: #000 !important;
							color: #fff !important;
						}
					}
				}

				&.active {
					&>a{
						border: solid 1px #000;
						background: #000 !important;
						color: #fff !important;
					}

					&>.start_school_sublist {
						height: auto !important;
					}

					&:hover {
						&>a{
							background: #000;
							border-radius: 5px !important;
						}
					}
				}
			}
		}
	}

	.start_school_stuff {
		.start_list {
			&>ul{
				&>li{
					width: calc(25% - 4px);
					margin: 2px;

					&>a {
						.start_description {
							font-size: 1rem;
							height: 54px;
						}
					}
				}
			}
		}
	}
}

@include max-screen(999px){
	.start_school_stuff {
		display: none;
	}

	.start_school_sublist {
		display: none;
	}

	.start_school_stuff_mobile {
		display: block;
	}
}